Example slide

This is a subtitle

Before we dive a bit deeper, here is a simple example of the clean theme in action.

• No pictures or anything fancy. Just text for the moment.

Next, we’ll take a brief tour of some theme components.

• We’ll use the same basic structure as the original LaTeX slides.
• Note that the full suite of Reveal.js features are available for this Quarto implementation, even if we don’t cover everything here.

Before you proceed…

Requirements for the coding examples in this demo

The clean theme is language agnostic. Use it with R, Python, Julia, etc. Or none of the above.

However, this demo uses R code to highlight advanced theme features. You’ll need to install some software if you’d like to render the demo “as-is”.

install.packages(c("modelsummary", "fixest", "pdftools", "tinytex", "threejs"))

quarto install tinytex

Components

Ordered and Unordered Lists

Here we have an unordered list.

• first item
  • sub-item
• second item

And next we have an ordered one.

1. first item
   1. sub-item
2. second item

Components

Alerts & Cross-refs

To emphasize specific words or text, you can:

• Use the default .alert class, e.g. important note.
• Use the .fg class for custom colour, e.g. important note.
• Use the .bg class for custom background, e.g. important note.

To cross-reference, you have several options, for example:

• Beamer-like .button class provided by this theme, e.g. Appendix
• Quarto’s native cross-ref syntax, e.g., “See Sección 6.3.”

Components

Citations

Citations follow the standard Quarto format and be sourced from BibLaTex, BibTeX, or CLS files. For example:

• Topic 1: Spatial Frictions (Fajgelbaum et al. 2018; Hsieh y Moretti 2019; Moretti 2011)

• Topic 2: Blah (Suárez Serrato y Zidar 2016)

Components

Blocks

Quarto provides dedicated environments for theorems, lemmas, and so forth.

But in presentation format, it’s arguably more effective just to use a Callout Block.

Components

Multicolumn I: Text only

Multicolumn support is very flexible and we can continue with a single full span column in the same slide.

Components

Multicolumn II: Text and figures

Note that sub- and multi-panel figures are also natively supported by Quarto. See here.

Components

Multicolumn III: Code and output

palette("Classic Tableau")

par(
  family = "HersheySans",
  las = 1, pch = 19, cex = 1.5
)

pairs(
  iris[,1:4],
  col=iris$Species
)

Markdown tables

Default table styling

The clean theme rolls its own minimalist aesthetic for tables. This should interface directly with Quarto’s excellent table support.

| fruit  | price  |
|--------|-------:|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {tbl-colwidths="[75,25]"}

Regression tables

Regression example

These aesthetics should carry over to any computation-based tables too.

Let’s take a few slides to illustrate via a simple regression example:

library(fixest)

mods = feols(
  rating ~ complaints + privileges + learning + csw0(raises + critical),
  data = attitude
)

dict = c("rating"     = "Overall Rating",
         "complaints" = "Handling of Complaints",
         "privileges" = "No Special Priviledges",
         "learning"   = "Opportunity to Learn",
         "raises"     = "Performance-Based Raises",
         "critical"   = "Too Critical")

Regression tables

modelsummary

Popular regression table software should play nicely with this theme out of the box. Here’s an example using modelsummary (with the default tinytable backend¹). See the next slide for the resulting table.

library(modelsummary) # Make sure you have >=v2.0.0

modelsummary(
  setNames(mods, c("(1)", "(2)")),
  coef_map = dict, stars = TRUE,
  gof_map = NA
  ) |>
  # some optional stylistic tweaks
  tinytable::group_tt(j = list("Dep. variable: Overall Rating" = 2:3)) |>
  tinytable::style_tt(i = 1:2, j = 2:3, background = "pink")

Regression tables

fixest::etable

Aside: We used the fantastic fixest package to estimate our regression models. fixest bundles its own powerful tabling functions. These were designed for LaTeX output, but can work with this (HTML) theme too.¹

• Set the output: asis R chunk option in your Quarto doc.
• Set the markdown = TRUE fixest::etable option.

```{r}
#| output: asis

setFixest_etable(markdown = TRUE, drop = "Constant")
setFixest_dict(dict)

etable(mods, highlight = .("se" = "complaints"))
```

Regression tables

fixest::etable (cont.)

Figure

Figure

Full-size Figures

You can use the {.background-image} container environment to completely fill the slide background with an image.

Ideally, your figure will be the same aspect ratio as the screen that you’re presenting on.

• This can be a bit tricky because of the dynamic nature of reveal.js / HTML. But it’s probably something close to 16:9.
• Aspect ratio can also matter for a regular full-frame images (previous slide).

Interactive plots

Note: Simple flight data example using threejs. There are many interactive plotting options beyond this. (More details.)

Other

What else can the clean theme do?

We have highlighted some theme-specific components in this demo.

But please note that all of the standard reveal.js functionality and plugins are compatible with the clean theme. This includes:

• chalkboard for annotating slides.
• multiplex for enabling audience navigation of your slides.
• pdf printing in case you don’t have access to a web browser.
• Etc.

Summary

A minimalist and elegant presentation theme

The Quarto reveal.js clean theme aims to be a minimalist and elegant presention theme. Here are some options to get you started.

Add the theme to an existing project.

quarto install extension grantmcdermott/quarto-revealjs-clean

… or, create a new project using our lean template.

quarto use template grantmcdermott/quarto-revealjs-clean

… or, create a new project using these demo slides as a full template.

quarto use template grantmcdermott/quarto-revealjs-clean-demo

Appendix

	Unique	Missing Pct.	Mean	SD	Min	Median	Max	Histogram
rating	22	0	64.6	12.2	40.0	65.5	85.0
complaints	23	0	66.6	13.3	37.0	65.0	90.0
privileges	24	0	53.1	12.2	30.0	51.5	83.0
learning	23	0	56.4	11.7	34.0	56.5	75.0
raises	21	0	64.6	10.4	43.0	63.5	88.0
critical	21	0	74.8	9.9	49.0	77.5	92.0
advance	20	0	42.9	10.3	25.0	41.0	72.0

Back to main